<template>
  <section>
    <BorderedTitle><slot></slot></BorderedTitle>
    <ul>
      <song-item
        @update:music="$emit('update:music', $event)"
        @update:playlist="$emit('update:playlist', newSongs)"
        v-for="(song,index) in newSongs"
        :key="song.id"
        :item="song"
        :index="index"
        :currentMusic="$attrs.currentMusic"
        :paused="$attrs.paused"
      ></song-item>
    </ul>
  </section>
</template>

<script>
import BorderedTitle from "@/components/BorderedTitle.vue";
import songItem from "@/components/songItem.vue";
export default {
  props: {
    newSongs: {
      type: Array,
    },
  },
  components: {
    BorderedTitle,
    songItem,
  },
};
</script>

<style>
</style>